<template>
	<view class="workC">
		<!-- 公司信息 -->
		<view class="work-company font40">
			<text>川东钻探公司</text>
		</view>
		<!-- banner -->
		<view class="slkd">

		</view>
		<view class="work-banner">
			<image src="../../static/img/work_pci2.png" mode="widthFix"></image>
		</view>
		<view class="work-list">
			<view class="work-itm boxS">
				<view class="work-title font30">
					我的
				</view>
				<view class="work-li flex-left">
					<view class="work-item font28">
						<image src="../../static/img/work_pci1_22.png" mode="widthFix" @click="urllink('vacate')">
						</image>
						<view class="work-text">
							请假
						</view>
					</view>
					<view class="work-item font28">
						<image src="../../static/img/work_pci1_1.png" mode="widthFix" @click="urllink('apply')"></image>
						<view class="work-text">
							申请记录
						</view>
					</view>
					<view class="work-item font28">
						<image src="../../static/img/work_pci1_23.png" mode="widthFix"
							@click="urllink('PreApplication')">
						</image>
						<view class="work-text">
							节假预申请
						</view>
					</view>
					<view class="work-item font28" @click="urllink('reporBack',0,'销假')">
						<image src="../../static/img/work_pci1_18.png" mode="widthFix"></image>
						<view class="work-text">
							销假
						</view>
					</view>
					<view class="work-item font28">
						<image src="../../static/img/work_pci1_2.png" mode="widthFix" @click="urllink('approve')">
						</image>
						<view class="work-text">
							审批列表
						</view>
					</view>
					<view class="work-item font28">
						<image src="../../static/img/work_pci1_3.png" mode="widthFix" @click="urllink('attendance')">
						</image>
						<view class="work-text">
							考勤数据
						</view>
					</view>

				</view>
			</view>

			<!-- 			<view class="work-itm boxS">
				<view class="work-title font30">
					申请
				</view>
				<view class="work-li flex-left">
					<block v-for="(item,index) in typeList" :key="index">
						<view class="work-item font28" v-if="item.type == 0" @click="urllink('supplement',item.type,'补卡申请')">
							<image src="../../static/img/work_pci1_4.png" mode="widthFix"></image>
							<view class="work-text">
								补卡申请
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 3" @click="urllink('evection',item.type,'公差申请')">
							<image src="../../static/img/work_pci1_5.png" mode="widthFix"></image>
							<view class="work-text">
								公差申请
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 4" @click="urllink('index',item.type,'补休')">
							<image src="../../static/img/work_pci1_6.png" mode="widthFix"></image>
							<view class="work-text">
								补休申请
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 5" @click="urllink('index',item.type,'培训学习')">
							<image src="../../static/img/work_pci1_19.png" mode="widthFix"></image>
							<view class="work-text">
								培训学习
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 16" @click="urllink('cancellation',item.type,'销假申请')">
							<image src="../../static/img/work_pci1_20.png" mode="widthFix"></image>
							<view class="work-text">
								销假申请
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 17" @click="urllink('index',item.type,'领导节日')">
							<image src="../../static/img/work_pci1_21.png" mode="widthFix"></image>
							<view class="work-text">
								领导节日
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="work-itm boxS">
				<view class="work-title font30">
					出勤
				</view>
				<view class="work-li flex-left">
					<block v-for="(item,index) in typeList" :key="index">
						<view class="work-item font28" v-if="item.type == 1" @click="urllink('index',item.type,'事假')">
							<image src="../../static/img/work_pci1_8.png" mode="widthFix"></image>
							<view class="work-text">
								事假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 2" @click="urllink('index',item.type,'病假')">
							<image src="../../static/img/work_pci1_9.png" mode="widthFix"></image>
							<view class="work-text">
								病假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 6" @click="urllink('index',item.type,'年假')">
							<image src="../../static/img/work_pci1_7.png" mode="widthFix"></image>
							<view class="work-text">
								年假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 7" @click="urllink('index',item.type,'疗养假')">
							<image src="../../static/img/work_pci1_16.png" mode="widthFix"></image>
							<view class="work-text">
								疗养假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 8" @click="urllink('index',item.type,'探亲假')">
							<image src="../../static/img/work_pci1_14.png" mode="widthFix"></image>
							<view class="work-text">
								探亲假
							</view>
						</view>				
						<view class="work-item font28" v-if="item.type == 9" @click="urllink('index',item.type,'婚假')">
							<image src="../../static/img/work_pci1_10.png" mode="widthFix"></image>
							<view class="work-text">
								婚假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 10" @click="urllink('index',item.type,'丧假')">
							<image src="../../static/img/work_pci1_13.png" mode="widthFix"></image>
							<view class="work-text">
								丧假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 11" @click="urllink('index',item.type,'产假')">
							<image src="../../static/img/work_pci1_11.png" mode="widthFix"></image>
							<view class="work-text">
								产假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 12" @click="urllink('index',item.type,'护理假')">
							<image src="../../static/img/work_pci1_12.png" mode="widthFix"></image>
							<view class="work-text">
								护理假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 13" @click="urllink('index',item.type,'哺育假')">
							<image src="../../static/img/work_pci1_15.png" mode="widthFix"></image>
							<view class="work-text">
								哺育假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 14" @click="urllink('index',item.type,'例假')">
							<image src="../../static/img/work_pci1_17.png" mode="widthFix"></image>
							<view class="work-text">
								例假
							</view>
						</view>
						<view class="work-item font28" v-if="item.type == 15" @click="urllink('index',item.type,'计划生育假')">
							<image src="../../static/img/work_pci1_18.png" mode="widthFix"></image>
							<view class="work-text">
								计划生育假
							</view>
						</view> -->
			<!-- 					<view class="work-item font28" v-if="item.type == 16" @click="urllink('index',item.type,'销假')">
							<image src="../../static/img/work_pci1_18.png" mode="widthFix"></image>
							<view class="work-text">
								销假
							</view>
						</view> -->
			<!-- 						<view class="work-item font28" v-if="item.type == 17" @click="urllink('index',item.type,'钻井队领导节日休息')">
							<image src="../../static/img/work_pci1_18.png" mode="widthFix"></image>
							<view class="work-text">
								钻井队领导节日休息
							</view>
						</view> -->
			<!-- <view class="work-item font28" v-if="item.type == 18" @click="urllink('index',item.type,'轮休')">
							<image src="../../static/img/work_pci1_18.png" mode="widthFix"></image>
							<view class="work-text">
								轮休
							</view>
						</view> -->
			<!-- </block>
				</view> -->
			<!-- </view> -->
			<view class="work-title font30 mt10">
				最近申请
			</view>
			<block v-for="(subItem,subIndex) in dataList" :key="subIndex">
				<view class="apply-item" :class="subItem.status==4?'opacityS':''">
					<view class="apply-title font26 flex-between">
						<text>审批编号: &nbsp;{{subItem.order_no?subItem.order_no:'暂无'}}</text>
						<text class="co-yellow" v-if="subItem.status==0">审批中</text>
						<text class="co-yellow" v-if="subItem.status==1">审批中</text>
						<text class="co-green" v-if="subItem.status==2">已通过</text>
						<text class="co-red" v-if="subItem.status==3">已拒绝</text>
						<text class="co-grey" v-if="subItem.status==4">已撤销</text>
					</view>
					<view class="apply-cont">
						<view class="apply-info flex-between">
							<view class="info-left font30">
								申请人：{{userInfo.user_name}}
							</view>
							<view class="info-right font26"
								v-if="subItem.approve_type_text!='补卡申请' && subItem.approve_type_text!='销假申请'">
								<text>累计天数：</text>
								<text class="co-blue">{{subItem.time_length}}天</text>
							</view>
						</view>
						<view class="apply-state font26">
							{{subItem.approve_type_text}}
						</view>
						<view class="apply-department font26">
							部门：{{userInfo.ou_name}} | 岗位：{{userInfo.post_name}}
						</view>
						<view class="apply-department font26">
							<block v-if="subItem.approve_type_text!='补卡申请' && subItem.approve_type_text!='销假申请'">
								申请时间：{{subItem.start_time}}
								<!-- - {{subItem.end_time}} -->
							</block>
							<block v-if="subItem.approve_type_text=='补卡申请'">
								补卡时间：{{subItem.start_time}}
							</block>
							<block v-if="subItem.approve_type_text=='销假申请'">
								申请时间：{{subItem.created_at}}
							</block>
						</view>
						<view class="apply-detial flex-between font26">
							<text>{{subItem.created_at}}</text>
							<view class="apply-btn flex-right">
								<view class="apply-button" @click="dialogToggle(subItem.id)"
									v-if="subItem.status==0 || subItem.status==1">
									撤销
								</view>
								<view class="apply-button" @click="toInfo('detail',subItem.id)">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<lzLoading :showloading='showLoading'></lzLoading>
		<!-- 提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'info'" title="系统提示" content="是否撤销申请？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		computed: {
			userInfo() {
				return uni.getStorageSync("USERINFO")
			}
		},
		data() {
			return {
				showLoading: true,
				typeList: [], //申请列表
				dataList: [], //数据列表
			}
		},
		onLoad() {

		},

		onShow() {
			Promise.all([this.getApplyType(),this.getNewList()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 1000)
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			//最近列表
			getNewList() {
				this.$api.getApplyList({
					page: 1,
					pageSize: 5,
					status: 0,
				}, true, (res) => {
					let list = res.list;
					for (let i in list) {
						list[i].created_at = this.$util.formatTime(list[i].created_at, 'Y-M-D h:m')
						list[i].start_time = this.$util.formatTime(list[i].start_time, 'Y-M-D h:m')
						list[i].end_time = this.$util.formatTime(list[i].end_time, 'Y-M-D h:m')
					}
					this.dataList = list;
				})
			},
			// 打开对话框
			dialogToggle(id) {
				this.selectId = id
				this.$refs.alertDialog.open()
			},
			// 确认
			dialogConfirm(val) {
				this.$api.revokeApply({
					id: this.selectId,
				}, true, (res) => {
					uni.showToast({
						title: "撤销成功",
					})
					this.getNewList()
				})
			},
			//  关闭对话框
			dialogClose() {
				console.log('点击关闭')
			},

			//页面跳转
			toInfo(url, id) {
				// 跳转到详情
				if (url == 'detail') {
					uni.navigateTo({
						url: "../apply/detail?id=" + id
					})
				}
			},
			//获取申请类型
			getApplyType() {
				return new Promise((resolve, reject) => {
					this.$api.getApplyType({}, true, (res) => {
						this.typeList = res.type
						resolve("success")
					})
				})
			},

			//页面跳转
			urllink(url, id, name) {
				// 跳转到申请记录
				if (url == 'apply') {
					uni.navigateTo({
						url: "../apply/index"
					})
				} // 跳转到销假班次
				if (url == 'reporBack') {
					uni.navigateTo({
						url: "../reporBack/reporBack"
					})
				}
				// 跳转到节假日预申请
				if (url == 'PreApplication') {
					uni.navigateTo({
						url: "../PreApplication/PreApplication"
					})
				} // 跳转到请假
				if (url == 'vacate') {
					uni.navigateTo({
						url: "../vacate/vacate"
					})
				}
				// 跳转到审核列表
				if (url == 'approve') {
					uni.navigateTo({
						url: "../approve/index"
					})
				}
				//跳转到考勤数据
				if (url == 'attendance') {
					uni.navigateTo({
						url: "../statistics/attendance"
					})
				}
				//出勤申请
				if (url == 'index') {
					uni.navigateTo({
						url: "../submit/index?id=" + id + "&name=" + name
					})
				}
				//补卡申请
				if (url == 'supplement') {
					uni.navigateTo({
						url: "../submit/supplement?id=" + id + "&name=" + name
					})
				}
				//销假申请
				if (url == 'cancellation') {
					uni.navigateTo({
						url: "../submit/cancellation?id=" + id + "&name=" + name
					})
				}
				//出差申请
				if (url == 'evection') {
					uni.navigateTo({
						url: "../submit/evection?id=" + id
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		.workC {
			// background: #fafafa;
			padding-bottom: 30rpx;

			.work-company {
				width: 92%;
				padding: 70rpx 4% 30rpx 4%;
				background: #fff;
				text-align: left;
				font-weight: bold;
			}

			.work-banner {
				width: 100%;

				image {
					width: 100%;
				}
			}

			.work-title {
				margin-bottom: 40rpx;
				font-weight: bold;
				position: relative;
			}

			.mt10 {
				margin-top: 20upx;
			}

			.work-list {
				padding: 0 4%;
				width: 92%;

				.work-itm {
					padding: 20rpx 4%;
					background: #fff;
					border-radius: 15rpx;
					margin-top: 30rpx;



					.work-li {
						// padding-bottom: 50rpx;
						flex-wrap: wrap;

						.work-item {
							width: 25%;
							text-align: center;
							margin-bottom: 30rpx;
							color: #787878;

							image {
								margin: auto;
								margin-bottom: 10rpx;
								width: 70rpx;
								height: 70rpx;
							}
						}
					}
				}
			}
		}

		.work-title::after {
			position: absolute;
			bottom: -10rpx;
			left: 15rpx;
			content: "";
			width: 28rpx;
			height: 6rpx;
			background: #008AFF;
		}

		.apply-item {
			padding: 0 4%;
			background: #fff;
			margin: auto;
			margin-top: 30rpx;

			.apply-title {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E6E6E6;
			}

			.apply-info {
				margin-top: 30rpx;

				.info-left {
					font-weight: bold;
					color: #454545;
				}

				.info-right {
					font-weight: 500;
					color: #454545;

					&:text {
						&:last-child {
							color: #008AFF;
						}
					}
				}
			}

			.apply-state {
				padding: 6rpx 20rpx;
				background: #FFFFFF;
				border: 1px solid #008AFF;
				border-radius: 50rpx;
				color: #008AFF;
				display: inline-block;
				margin: 20rpx 0;
			}

			.apply-department {
				font-weight: 500;
				color: #787878;

			}

			.apply-department {
				font-weight: 500;
				color: #787878;
				margin-bottom: 20rpx;
			}

			.apply-detial {
				padding: 30rpx 0;
				border-top: 1px solid #E6E6E6;
			}

			.apply-button {
				padding: 10rpx 20rpx;
				background: #fff;
				border-radius: 7rpx;
				border: 1rpx solid #008AFF;
				color: #008AFF;
				margin-left: 20rpx;

				&:last-child {
					background: #008AFF;
					border: 1rpx solid #008AFF;
					border-radius: 7rpx;
					color: #fff;
				}
			}
		}
	}
</style>
